<template>
	<view class="page pages">
		<uni-nav-bar left-icon="left" :right-text="$t('order.afterSales.requestReturn.Tui')" :title="salesData.type==1?$t('order.afterSales.requestReturn.Apply'):$t('order.afterSales.requestReturn.Applys')"
			backgroundColor='#F4F3F8' :border="false" @clickLeft="back" @clickRight="q" />
		<view class="flex good">
			<image :src="goodInfo.good_mainimg"></image>
			<view class="good_info">
				<view class="good_info_title">{{goodInfo.good_name}}</view>
				<view style="font-size: 28rpx;color: #ccc;">{{goodInfo.sku_name}} {{$t('order.afterSales.requestReturn.Num')}} {{goodInfo.nums}}</view>
				<view style="font-weight: bold;">￥{{goodInfo.good_price}}</view>
			</view>
		</view>
		<view class="flex_be cause" @click="openPopup">
			<view>{{$t('order.afterSales.requestReturn.Reason')}}</view>
			<view :style="!!salesData.reason?'color: #000;':'color: #ccc;'">{{salesData.reason||$t('order.afterSales.requestReturn.Choose')}} <uni-icons
					type="forward" color="#ccc"></uni-icons> </view>
		</view>
		<view class="price">
			<view class="flex_be" style="align-items: flex-start;">
				<view style="width: 20%;flex-shrink: 0;">{{$t('order.afterSales.requestReturn.Total')}}</view>
				<view style="width: 50%;font-size: 28rpx;color: #ccc;flex-shrink: 0;">{{$t('order.afterSales.requestReturn.Refund')}}
				</view>
				<view class="flex" style="width: 25%;font-size: 34rpx;font-weight: bold;border-bottom: 1px solid #ddd;">
					￥<input style="text-align: right;" type="text" v-model="salesData.refmoney"
						:placeholder="goodInfo.refmoney" @input="input">
				</view>
			</view>
			<view class="flex_be" style="align-items: flex-start;font-size: 28rpx;">
				<view>{{$t('order.afterSales.requestReturn.Amount')}}</view>
				<view style="width: 50%;color: #ccc;">{{$t('order.afterSales.requestReturn.Coupon')}}</view>
				<view>￥{{goodInfo.money}}</view>
			</view>
		</view>
		<view class="images">
			<uni-file-picker limit="9" :title="$t('order.afterSales.requestReturn.Most')" @select="select" @delete="del"></uni-file-picker>
		</view>
		<view class="btn">
			<view class="btn_price">{{$t('order.afterSales.requestReturn.Totals')}}￥{{salesData.refmoney}}</view>
			<view class="btn_btn">
				<view @click="serviceAdd">{{$t('order.afterSales.requestReturn.Submit')}}</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup-content">
				<view class="flex_be">
					<view></view>
					<view style="font-weight: bold;">{{$t('order.afterSales.requestReturn.chooseReason')}}</view>
					<uni-icons type="closeempty" @click="closePopup"></uni-icons>
				</view>
				<view class="flex_be" v-for="item in typeList" :key="item.id" @click="typeClick(item)">
					<view>{{item.name}}</view>
					<view :class="typeAct==item.id?'popup-box popup-active':'popup-box'">
						<uni-icons type="checkmarkempty" size="10" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		serviceGetorder,
		getSetting,
		serviceAdd
	} from '@/api/api.js'
	export default {
		data() {
			return {
				salesData: {},
				goodInfo: {},
				typeAct: null,
				typeList: [],
				images: [],
				noImgS: []
			};
		},
		onLoad(option) {
			this.salesData = JSON.parse(option.salesData)
			serviceGetorder({
				token: uni.getStorageSync('token'),
				ordid: this.salesData.ordid,
				og_id: this.salesData.og_id
			}).then(res => {
				this.goodInfo = res.data.data
				this.salesData.refmoney = this.goodInfo.refmoney
			})
			getSetting({}).then(res => {
				let typeArr = JSON.parse(res.data.data[`service_reason_${uni.getStorageSync('lang')}`])
				for (let i in typeArr) {
					let arr = {}
					arr.id = i
					arr.name = typeArr[i]
					this.typeList.push(arr)
				}
			})
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			input(e) {
				this.$forceUpdate() // 页面强制刷新
			},
			typeClick(item) {
				this.salesData.reason = item.name
				this.typeAct = item.id
				setTimeout(() => {
					this.closePopup()
				}, 100)
			},
			del(e) {
				let num = this.noImgS.indexOf(e.tempFilePath)
				this.images.splice(num, 1)
			},
			// 获取上传状态
			select(e) {
				this.noImgS = [...this.noImgS, e.tempFilePaths[0]]
				const uploadTask = uni.uploadFile({
					url: 'https://appzdm.com/api/common/upload',
					methods: 'POST',
					formData: {
						file: e.tempFilePaths[0],
						type: 'order'
					},
					name: 'file',
					filePath: e.tempFilePaths[0],
					success: (res) => {
						this.images = [...this.images, JSON.parse(res.data).data.url]
					},
				})
				uploadTask.onProgressUpdate((res) => {
					if (res.progress == 100) {
						this.salesData.btn = 1
					} else {
						this.salesData.btn = 0
					}
				});
			},
			serviceAdd() {
				if (this.salesData.btn == 1) {
					serviceAdd({
						token: uni.getStorageSync('token'),
						ordid: this.salesData.ordid,
						og_id: this.salesData.og_id,
						type: this.salesData.type,
						refmoney: this.salesData.refmoney,
						reason: this.salesData.reason,
						images: this.images.toString()
					}).then(res => {
						uni.showToast({
							title: res.data.msg,
							icon: "none"
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/shop/order/afterSale'
							})
						}, 600)
					})
				} else if (this.salesData.btn == 0) {
					uni.showToast({
						title: this.$t('order.afterSales.requestReturn.sPic'),
						icon: "none"
					})
				} else if (this.images.length == 0) {
					uni.showToast({
						title: this.$t('order.afterSales.requestReturn.pPic'),
						icon: "none"
					})
				} else {
					return
				}
			},
			openPopup() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},
			q() {
				uni.navigateTo({
					url: `/pages/shop/login/policy?type=3`
				})
			}
		}
	}
</script>

<style lang="scss">
	.flex {
		display: flex;
		align-items: center;
	}

	.flex_be {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.page {
		background-color: #F4F3F8;
		min-height: 100vh;
		padding: 1rpx;
		box-sizing: border-box;
	}

	.good {
		background-color: #fff;
		padding: 30rpx 40rpx 50rpx;
		margin: 10rpx 30rpx 30rpx;

		image {
			width: 180rpx;
			height: 180rpx;
			border: 2rpx solid #ccc;
			flex-shrink: 0;
		}

		.good_info {
			height: 180rpx;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.good_info_title {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}

	.cause {
		background-color: #fff;
		padding: 30rpx 40rpx;
		margin: 10rpx 30rpx 30rpx;
	}

	.price {
		background-color: #fff;
		padding: 0 40rpx;
		margin: 10rpx 30rpx 30rpx;

		&>view {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #ddd;
		}

		&>view:last-child {
			border-bottom: none;
		}
	}

	.images {
		background-color: #fff;
		padding: 10rpx 40rpx 30rpx;
		margin: 10rpx 30rpx 30rpx;
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		.btn_price {
			background-color: #FFF3F3;
			padding: 20rpx 0;
			text-align: center;
			color: red;
			font-size: 26rpx;
		}

		.btn_btn {
			background-color: #fff;
			padding: 20rpx;

			&>view {
				background-color: #00C2C2;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
			}
		}
	}

	.popup-content {
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 0 20rpx 100rpx;

		&>view {
			height: 100rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #ddd;
		}

		&>view:first-child {
			border-bottom: none;
		}

		.popup-box {
			width: 30rpx;
			height: 30rpx;
			border-radius: 30rpx;
			border: 1rpx solid #ddd;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.popup-active {
			background-color: #00C2C2;
			border: none;
		}
	}
</style>